<template>
    <lay-container>
        <div class="login-container">
            <h2 class="notselect">电商后台管理系统</h2>
            <lay-form>
                <lay-form-item prop="account" size="normal">
                    <lay-input v-model="username" placeholder="请输入账号"
                        suffix-icon="layui-icon-username"></lay-input>
                </lay-form-item>
                <lay-form-item prop="password" size="lg">
                    <lay-input v-model="password" type="password" placeholder="请输入密码"
                        suffix-icon="layui-icon-password"></lay-input>
                </lay-form-item>

                <lay-form-item style="text-align: center">
                    <lay-button class="submit-btn" @click="loginHandler" type="normal">登录</lay-button>
                </lay-form-item>
            </lay-form>
        </div>
    </lay-container>
</template>


<script setup>
import { reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { validator } from '@/utils/validator.js';
import { login } from '@/apis/outhorize';
const router = useRouter();

//登录表单绑定的数据
const username = ref('admin');
const password = ref('admin')

const loginHandler = async () => { 
    let result = validator([
        { validator: val => val != '', message: '账号格式错误', value: username.value },
        { validator: val => val != '', message: '请填写密码', value: password.value },
    ]);
    if (!result) return false;
    let res = await login(username.value,password.value)
    res && router.push({ path: '/' });
}
</script>
<style scoped>
.layui-container {
    height: 100%;
    width: 100%;
    background: url('@/assets/login/bg.jpeg') no-repeat center center;
    background-size: cover;
}

.login-container {
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.layui-input{
    color: #fff;
    height: 45px;
    padding: 0 15px;
    font-size: 14px;
    line-height: 1em;
    text-indent: 35px;
    border-radius: 5px;
    letter-spacing: 1px;
    background: rgba(0,0,0,.12);
    text-shadow: #000 0.1em 0.1em 0.1em;
    -webkit-text-fill-color: #fff!important;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.3) inset!important;
}

.login-container h2 {
    text-align: center;

    color: #fff;
    padding: 20px 0;
    font-size: 25px;
    text-align: center;
    font-weight: 700;
    letter-spacing: 3px;
    text-shadow: #000 0.05em 0.05em 0.05em;
}

.submit-btn {
    width: 100%;
    color: #333 !important;
    height: 45px !important;
    border: none !important;
    background: #fff !important;
    border-radius: 5px !important;
    letter-spacing: 1px !important;
    box-shadow: 0 15px 30px 0 hsla(0, 0%, 100%, .25) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);

}
</style>